<template>
  <div class="divBox">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card>
          <div class="card-head">
            <div class="line"></div>
            快捷入口
          </div>
          <div class="card-content">
            <router-link class="enter-item" :to="{path:item.component}" v-for="item in enter" :key="item.id">
              <div class="enter-icon" :style="'background:'+item.color">
                <i :class="'el-icon-'+item.icon"></i>
              </div>
              <div class="enter-name">{{item.name}}</div>
            </router-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { } from '@/api/dashboard'

export default {
  data() {
    return {
      enter:[

      ],
      color:['#1890ff','#ef9c20','#f56c6c','#a277ff','#e8b600','#4bcad5']
    }
  },
  methods: {

  },
  mounted() {
    this.enter=[];
    let index=0;
    this.$store.getters.permission_routes.forEach(item=>{
      if(index==this.color.length){
        index=0;
      }
      this.enter.push({id:item.id,name:item.name,icon:item.extra,color:this.color[index],component:item.url})
      if(index<this.color.length){
        index++;
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.card-head{
  width: 100%;
  display: flex;
  height: 20px;
  align-items: center;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 30px;
  .line{
    width: 4px;
    height: 20px;
    background: #4086ff;
    border-radius: 10px;
    margin-right: 10px;
  }
}
.card-content{
  width: 100%;
  height: 192.2px;
  display: flex;
  flex-wrap: wrap;
  .enter-item{
    width: calc(100%/6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    .enter-icon{
      width: 50px;
      height: 50px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      i{
        color: #fff;
        font-size: 20px;
      }
    }
    .enter-name{
      margin-top: 10px;
      font-size: 14px;
    }
    .value{
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 16px;
    }
    .name{
      font-size: 14px;
    }
  }
}
</style>
